<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="#" type="image/png">

    <!--common-->
    <link href="css/style.css" th:href="@{/css/style.css}" rel="stylesheet">
    <link href="css/style-responsive.css" th:href="@{/css/style-responsive.css}" rel="stylesheet">

    <title>Dynamic Table</title>

    <!--    <div th:include="common :: commonHeader"></div>-->

</head>

<body class="sticky-header">

<section>
    <!--    <div th:replace="common::#leftmenu"></div>-->

    <!-- main content start-->
    <!--    <div class="main-content">-->

    <!--        <div th:replace="common::headermenu"></div>-->

    <!-- page heading start-->
    <div class="page-heading">
        <h3 style="color: wheat">
            监督园园学习
        </h3>
        <!--            <ul class="breadcrumb">-->
        <!--                <li>-->
        <!--                    <a href="#">Dashboard</a>-->
        <!--                </li>-->
        <!--                <li>-->
        <!--                    <a href="#">Data Tables</a>-->
        <!--                </li>-->
        <!--                <li class="active"> Dynamic Table</li>-->
        <!--            </ul>-->
    </div>

    <div style="color: lightgoldenrodyellow;size: 24px;float: right;padding-right: 40px">
        欢迎您，杨园园
        <span style="color: lightgoldenrodyellow;size: 24px" th:text="${name}">

        </span>
    </div>
    <!-- page heading end-->

    <div>

        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
            <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
            <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
            <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="home">
                <!--body wrapper start-->
                <div class="wrapper">
                    <div class="row">
                        <div class="col-sm-12">

                            <!--查询表单-->
                            <form method="post" th:action="@{/queryWithConditionalByPunch}">
                                <!--                <form method="post" th:action="@{/getPunchInfo}">-->
                                <div style="display: flex">
                                    <div class="form-group" style="width: 40rem; margin: 1rem">
                                        <label for="finishStatus1" style="color: yellow">完成状态</label>
                                        <input type="text" class="form-control" id="finishStatus1" name="finishStatus">
                                        <small id="emailHelp" class="form-text text-muted" style="color: wheat">不输入默认查询全部</small>
                                    </div>
                                    <div class="form-group col-sm" style="width: 40rem;margin: 1rem">
                                        <label for="punchTime1" style="color: yellow">日期</label>
                                        <input type="text" class="form-control" id="punchTime1" name="punchTime">
                                        <small id="emailHelp1" class="form-text text-muted" style="color: red">您必须固定格式。如2021-5-21 &nbsp</small>
                                        <small id="emailHelp2" class="form-text text-muted" style="color: wheat">不输入默认查询全部</small>
                                    </div>
                                    <button type="submit" class="btn btn-success" style="margin: auto 0;height: 5rem">查询</button>
                                </div>
                            </form>

                            <button class="btn btn-success" id="emp_add_modal_btn" style="margin: 1rem;height: 4rem">添加航班</button>

                            <div class="row">
                                <!--    共12列，占四列，向右偏移四列 *4* 4 *4*-->
                                <div class="col-md-4 col-md-offset-8">

                                </div>


                            </div>
                            <section class="panel">
                                <header class="panel-heading">
                                    航班信息
                                    <span class="tools pull-right">
                <a href="javascript:;" class="fa fa-chevron-down"></a>
                <a href="javascript:;" class="fa fa-times"></a>
             </span>
                                </header>
                                <div class="panel-body">
                                    <div class="adv-table">
                                        <table class="display table table-bordered table-striped" id="dynamic-table">
                                            <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>打卡时间</th>
                                                <th>基础奖赏金额</th>
                                                <th>基础惩罚金额</th>
                                                <th>额外奖励</th>
                                                <th>额外惩罚</th>
                                                <th>是否双倍奖励</th>
                                                <th>支付宝账号</th>
                                                <th>完成</th>
                                                <th>评价等级</th>
                                                <th>空</th>
                                                <th>空</th>
                                                <th>操作</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr class="gradeA" th:each="flight,stats:${punches}">
                                                <td th:text="${stats.count}">123</td>
                                                <td th:text="${flight.punchTime}">打卡时间</td>
                                                <td th:text="${flight.baseAwardRMB}">基础奖赏金额</td>
                                                <td th:text="${flight.basePunishRMB}">基础惩罚金额</td>
                                                <td th:text="${flight.extraAward}">额外奖励</td>
                                                <td th:text="${flight.extraPunish}">额外惩罚</td>
                                                <td th:text="${flight.isDoubleAward}">是否双倍奖励</td>
                                                <td th:text="${flight.zfb}">支付宝账号</td>
                                                <td th:text="${flight.finishStatus}">完成</td>
                                                <td th:text="${flight.judge}">评价等级</td>
                                                <td>空</td>
                                                <td>空</td>
                                                <td>
                                                    <!--                                        <a th:href="@{/deleteFlight/{fno}(fno=${flight.fno})}" class="btn btn-danger btn-sm" type="button">删除</a>-->
                                                    <!--                                        <a th:href="@{/deleteFlight/{fno}(fno=${flight.fno})}" class="btn btn-danger btn-sm" type="button">删除</a>-->
                                                    <a class="btn btn-danger btn-sm" type="button">删除</a>
                                                    <a  class="btn btn-default btn-sm" type="button">修改</a>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </section>
                        </div>
                    </div>
                    <!--        </div>-->
                    <!--body wrapper end-->

                    <!--footer section start-->
                    <footer>
                        2023 &copy; 李威彤&杨园园 </a>
                    </footer>
                    <!--footer section end-->


                </div>
                <!-- main content end-->
            </div>
            <div role="tabpanel" class="tab-pane" id="profile">
                ...
            </div>
            <div role="tabpanel" class="tab-pane" id="messages">
                ...
            </div>
            <div role="tabpanel" class="tab-pane" id="settings">
                ...
            </div>
        </div>

    </div>

</section>



<!-- 员工添加Modal -->
<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">新增航班</h4>
            </div>
            <div class="modal-body">
                <!--                                员工表单-->
                <form id="add_form" class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">航班号</label>
                        <div class="col-sm-10">
                            <input name="fno" type="text" class="form-control" id="fno"
                                   placeholder="fno">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">起点</label>
                        <div class="col-sm-10">
                            <input name="fstart" type="email" class="form-control" id="fstart"
                                   placeholder="fstart">
                        </div>
                    </div>
<!--                    <div class="form-group">-->
<!--                        <label class="col-sm-2 control-label">终点</label>-->
<!--                        <div class="col-sm-10">-->
<!--                            <label class="radio-inline">-->
<!--                                <input type="radio" name="gender" id="gender1_add_input" value="M" checked="checked"> 男-->
<!--                            </label>-->
<!--                            <label class="radio-inline">-->
<!--                                <input type="radio" name="gender" id="gender0_add_input" value="F"> 女-->
<!--                            </label>-->
<!--                        </div>-->
<!--                    </div>-->
                    <div class="form-group">
                        <label class="col-sm-2 control-label">终点</label>
                        <div class="col-sm-10">
                            <input name="fend" type="text" class="form-control" id="fend"
                                   placeholder="fend">
                        </div>
                    </div>
<!--                    <div class="form-group">-->
<!--                        <label class="col-sm-2 control-label">日期</label>-->
<!--                        <div class="col-sm-4">-->
<!--                            &lt;!&ndash;                                            部门提交部门id即可&ndash;&gt;-->
<!--                            <select name="dId" class="form-control" id="dept_add_select">-->

<!--                            </select>-->
<!--                        </div>-->
<!--                    </div>-->
                    <div class="form-group">
                        <label class="col-sm-2 control-label">日期</label>
                        <div class="col-sm-10">
                            <input name="fdate" type="date" class="form-control" id="fdate"
                                   placeholder="fdate">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">起飞时刻</label>
                        <div class="col-sm-10">
                            <input name="ftakeOff" type="text" class="form-control" id="ftakeOff"
                                   placeholder="ftakeOff">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">到达时刻</label>
                        <div class="col-sm-10">
                            <input name="farrive" type="text" class="form-control" id="farrive"
                                   placeholder="farrive">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">剩余座位数</label>
                        <div class="col-sm-10">
                            <input name="fseat" type="text" class="form-control" id="fseat"
                                   placeholder="fseat">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">票价</label>
                        <div class="col-sm-10">
                            <input name="fprice" type="text" class="form-control" id="fprice"
                                   placeholder="fprice">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">折扣票数</label>
                        <div class="col-sm-10">
                            <input name="fdiscountVote" type="text" class="form-control" id="fdiscountVote"
                                   placeholder="fdiscountVote">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">折扣率</label>
                        <div class="col-sm-10">
                            <input name="fdiscountRate" type="text" class="form-control" id="fdiscountRate"
                                   placeholder="fdiscountRate">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">航班所属航空公司</label>
                        <div class="col-sm-10">
                            <input name="fcompany" type="text" class="form-control" id="fcompany"
                                   placeholder="fcompany">
                        </div>
                    </div>

                    <!--                    <div class="form-group">-->
                    <!--                        <div id="successAndError" class="col-sm-4">-->
                    <!--                            <span id="jsrSpan">?</span>-->
                    <!--                        </div>-->
                    <!--                    </div>-->
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button id="emp_save_btn" type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>
<!--<div th:replace="common::commonScript"></div>-->
<!--dynamic table-->
<script type="text/javascript" language="javascript" src="js/advanced-datatable/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="js/data-tables/DT_bootstrap.js"></script>
<!--dynamic table initialization -->
<script src="js/dynamic_table_init.js"></script>
<!-- Placed js at the end of the document so the pages load faster -->
<script th:src="@{/js/jquery-1.10.2.min.js}"></script>
<script th:src="@{/js/jquery-ui-1.9.2.custom.min.js}"></script>
<script th:src="@{/js/jquery-migrate-1.2.1.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/modernizr.min.js}"></script>
<script th:src="@{/js/jquery.nicescroll.js}"></script>
<!--common scripts for all pages-->
<script th:src="@{/js/scripts.js}"></script>

<script>
    /**
     * 新增员工按钮点击事件
     */
    $("#emp_add_modal_btn").click(function () {
        // 发送ajax请求，查询部门信息，以便显示在下拉列表中
        // getDept("#dept_add_select");
        // 弹出模态框
        $("#empAddModal").modal({
            backdrop: 'static'
        });
    });

    /**
     * 点击保存，保存员工方法
     */
    $("#emp_save_btn").click(function () {
        // 提交表单数据给服务器，前端数据校验
        // if (!validate_add_form()) {
        //     return false;
        // }
        // 发送ajax请求保存员工
        $.ajax({
            url:"/addFlight",
            type:"POST",
            // 请求数据 是表单每一项具体输入信息，使用serialize
            data:$("#add_form").serialize(),
            success:function (data) {
                // if (data.code == 100){
                    // 关闭模态框
                    $("#empAddModal").modal('hide');
                    // $("#jsrSpan").text(""); // 修复再次弹出模态框仍有上次错误提示信息bug
                    // 发送ajax前往最有一页查询插入的内容,总记录数肯定比总页码大
                    window.location.reload(); // 重新刷新当前页面。新增的保存后，重要。

                    // to_page(totalResult);


                // }else {
                //     // 否则显示失败信息
                //     console.log(data);//{code: 200, msg: "处理失败", map: {…}}
                //     if (undefined != data.map.errorFields.email){
                //         // 显示邮箱的错误信息
                //         show_validate_msg("#successAndError","error",data.map.errorFields.email);
                //     }
                //     if (undefined != data.map.errorFields.empName){
                //         // 显示名字的错误信息
                //         show_validate_msg("#successAndError","error",data.map.errorFields.empName);
                //     }
                // }

            }
        });
    });
</script>

</body>
</html>
